<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第三次课——外部样式表、块级元素、定位</title>
    <!-- 
    1.建立后缀名为.css的样式文件  css代码都写到这里
    2.在html文件中用<link>标签引入 
    -->
    <link rel="stylesheet" href="./css/demo.css">

    <style>
        /* 内部样式表 */
        div {
            color: aqua;
        }
    </style>
</head>

<body>
    <!-- css引入方式 -->
    <div class="box1">内部样式表 我是第一个盒子</div>
    <div class="box2" style="color: red;font-size: 20px;">行内样式表 我是第二个盒子</div>
    <div class="box3">外部样式表</div>


    <div class="box4">块级元素</div>
    <!-- div是最典型的块级元素
    1.独占一行
    2.高度 宽度 内外边距可控
    3.宽度默认为容器的100% 
    4.可以容纳行内元素和其他块元素-->

    <span style="width: 200px;">行内元素行内元素行内元素行内元素行内元素</span>
    <span>行内元素</span>
    <a href="http://www.baidu.com">百度</a>
    <!-- span是最典型的行内元素
    1.相邻的行内元素在同一行  
    2.设置宽高无效
    3.宽度是它本身内容的宽度
    4.只能容纳文本或行内元素 -->

    <input type="text" value="行内块元素">
    <input type="text">
    <!-- 行内块元素  img input 
    1.和相邻元素在同一行 但中间会有空隙
    2.宽度是本身内容宽度
    3.高度 宽度 内外边距都可以控制 -->

    <!-- 定位=定位模式+边偏移
    边偏移  top left right bottom
    top: 80px    顶端偏移量，定义元素相对于其父元素上边线的距离。
    定位模式 position  
    static  静态定位 -->

    <!-- relative 相对定位   box1
    1.相对于自身的位置经行定位  以左上角为基点
    2.保留在标准流中的位置 -->



    <div class="box5">没有父级元素</div>
    <div class="grandfather">
        <div class="father">
            <div class="son">父级元素有定位</div>
            <div class="box6">第二个</div>
        </div>
    </div>

    <!-- absolute 绝对定位 
    1.没有父元素/父元素没有定位   则以浏览器为准 
    2.父级有定位  绝对定位是将元素依据最近的已经定位的父元素进行定位。
    3.完全脱离标准流，完全不占位置-->

    <!-- fixed 固定定位  页面滚动的时候，位置不会变化
    1.以浏览器的可视窗口为参照点
    2.不占有原先的位置 -->
    <div class="box7">
        fixed定位
    </div>
</body>

</html>